<template>
  <div class="login-wrap">
    <div class="login-bar">
      <div class="logo">
        <h1>Welcome~~</h1>
      </div>
      <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-row :gutter="20">
            <el-col :span="14">
              <el-input v-model="ruleForm.code" placeholder="验证码" ></el-input>
            </el-col>
            <el-col :span="6">
              <el-button @click="sendcode" :disabled="isdisabled">{{codeText}}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="agree">
          <el-checkbox v-model="ruleForm.agree"></el-checkbox>
          <span class="protocol">
            我已阅读并同意
            <a href="javascript:void(0)">用户协议</a>和
            <a href="javascript:void(0)">隐私条款</a>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="loginBtn"
            @click="loginbtn('ruleForm')"
            v-loading="btnloading"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/login.js";
export default {
  data() {
    return {
      ruleForm: {
        mobile: "13911111111",
        code: "246810",
        agree: true
      },
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { len: 11, message: "请输入11位手机号", trigger: "blur" },
          {
            pattern: /0?(13|14|15|18|17)[0-9]{9}/,
            message: "请输入有效位手机号",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          { len: 6, message: "请输入6位验证码", trigger: "blur" }
        ],
        agree: [
          { pattern: /true/, message: "必须勾选输入框", trigger: "click" }
        ]
      },
      btnloading: false,
      codeText: "发送验证码",
      isdisabled:false
    };
  },
  methods: {
    loginbtn(formName) {
      this.btnloading = true;
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await login(this.ruleForm);
          // console.log(res);
          this.btnloading = false;
          this.$message.success("登录成功");
          //跳转到home页
          this.$router.push("/home");
          //把返回的用户登录信息保存到本地
          window.localStorage.setItem(
            "userInfo",
            JSON.stringify(res.data.data)
          );
        } else {
          this.$message.error("账号或密码错误,请重新登录");
          console.log("error submit!!");
          return false;
        }
      });
    },
    sendcode() {
      let num = 5;

      let timeID = setInterval(() => {
        num--;
        this.isdisabled = true;
        this.codeText = `还有${num}秒`;
        if (num < 0) {
          clearInterval(timeID);
          this.codeText = "重新发送";
          this.isdisabled = false;
        }
      }, 1000);
    }
  }
};
</script>

<style scoped lang="less">
.login-wrap {
  height: 100%;
  width: 100%;
  background: url("../images/login_bg.jpg") no-repeat center / cover;
  position: relative;
  .login-bar {
    width: 300px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    .logo {
      text-align: center;
      height: 40px;
      img {
        height: 40px;
      }
    }
  }
  .demo-ruleForm {
    margin-top: 20px;
    .protocol {
      color: #c0aba2;
      margin-left: 10px;
      a {
        color: #3d99fa;
        text-decoration: none;
      }
    }
    .loginBtn {
      width: 100%;
    }
  }
}
</style>